import React from 'react';
import './main.css';

export default class Switch extends React.Component {

  state = {
    off: !this.props.defaultChecked,
  }

  onSwitch () {
    const off = !this.state.off;
    this.setState({
      off,
    });
    this.setState({
      off,
    });
    this.setState({
      off,
    });
    this.setState({
      off,
    });
    this.props.onChange(off);
  }

  // react: state props
  // vue: data props
  // is Batch Update
  // event

  render () {
    const { off } = this.state;

    return (
      <div
        className={ 'switch ' + (off ? 'off' : '') }
        onClick={ this.onSwitch.bind(this) }
      >
        <div className={ 'btn ' + (off ? 'off' : '') }></div>
      </div>
    );
  }

}
